<template>
  <div>
    <div class=" flex-lrb flex-xm-lr flex-nr-c header-main">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-dropdown trigger="click">
        <div class="flex-lrb flex-nr-c header-box">
          <img src="../assets/images/user.gif">
          <span>Admin</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-plus">设置</el-dropdown-item>
          <el-dropdown-item icon="el-icon-circle-plus">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <ul class=" flex-lrh flex-nr-c header-tabs">
      <li class=" flex-lrb flex-nr-c" v-for="(item,key) in $store.state.headerTabs" :key="key" :class="{'active':$store.state.headerActiveTab==item.name}">
        <span @click="clickTab(key)">{{item.name}}</span>
        <i class="el-icon-close" @click="removeTab(key)" v-if="key!=0"></i>
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  //import引入的组件
  components: {},
  //子组件引用父组件:data=data 方法@search=search使用this.emit('search', '参数');
  props: [],
  data () {
    return {
    };
  },
  methods: {
    /**标签移除后 */
    removeTab (key) {
      if (this.$route.path != this.$store.state.headerTabs[key].path) {//是否是当前路由
        this.$store.state.headerTabs.splice(key, 1);//删除
        return;
      }
      this.$router.push(this.$store.state.headerTabs[key - 1].path);
      this.$store.state.headerTabs.splice(key, 1);
    },
    /**点击标签 */
    clickTab (key) {
      this.$store.state.headerActiveTab = this.$store.state.headerTabs[key].name;
      if (this.$route.path != this.$store.state.headerTabs[key].path) {
        this.$router.push(this.$store.state.headerTabs[key].path);
      }
    }
  },
  mounted () {

  },
};
</script>

<style>
.header-main {
  padding: 10px 20px;
}
.header-box {
  font-size: 12px;
}
.header-box img {
  border-radius: 50%;
  height: 32px;
}
.header-box span {
  color: #909399;
  padding: 0 12px;
}
.header-tabs {
  padding: 0 20px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
}
.header-tabs li {
  /* border: 1px solid #d8dce5; */
  background: #fff;
  height: 26px;
  line-height: 26px;
  padding: 0 8px;
  margin: 3px;
  cursor: pointer;
}
.header-tabs .active {
  background-color: #42b983;
  color: #fff;
  border-color: #42b983;
}
.header-tabs .active::before {
  content: "";
  background: #fff;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  margin-right: 2px;
}
.header-tabs li span {
  padding: 0 5px;
}
.header-tabs li i {
  border-radius: 50%;
  padding: 2px;
}
.header-tabs li i:hover {
  color: #fff;
  background: #b4bccc;
}
</style>